<template>
	<view class="bg-F5F5F5" style="    height: 100vh;
    overflow: hidden;">
		<view style="margin-bottom: 22rpx;">
			<u-tabs-swiper inactive-color="#111111" font-size="26" active-color="#DFB982" ref="uTabs" :list="list"
				:current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<!-- :style="{   height: windowHeight + 'px' }" -->
		<swiper :style="{   height: windowHeight-40 + 'px' }" :current="swiperCurrent"
			@animationfinish="animationfinish" >
			<swiper-item class="swiper-item">
				<scroll-view lower-threshold="20" :style="{ height: windowHeight-40 + 'px' }" scroll-y="true"
					@scrolltolower="onreachBottom"   >
					<view class="px-28 pb-40 bg-FFFFFF" style="padding-top: 30rpx;" v-for="(item,index) in dataList"
						:key="index" @click.native="details(item)">
						<!-- <x-did-title name="普医堂中医(综合)诊所"> -->
						<x-did-title :name="item.store_info.store_name">
							<view class=" fs-26 fw-400 c-77">
								{{item.status_name}}
							</view>
						</x-did-title>

						<x-StayToThe v-for="(item2,index2) in item.goods_info" :key="index2" :img="item2.goods_image"
							:title="item2.goods_title" :price="item2.goods_price" :num="item2.goods_num" />
						<view class="just-between">
							<view class="fw-400 c-77 f-26">
								<!-- 2022-01-10 18:45 -->
								{{item.updatetime}}
							</view>
							<view class="flex aj-center">
								<text>合计</text>
								<text class="c-11 f-bold f-36">￥{{item.total_amount}}</text>
							</view>
						</view>
					</view>
					<view class="aj-center" v-if="dataList.length==0">
						暂无更多
					</view>
					<view class="aj-center">
						<u-loading mode="circle" style="padding-top: 10rpx;padding-bottom: 10rpx;" v-show="load">wefwe
						</u-loading>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view lower-threshold="20" :style="{ height: windowHeight-40 + 'px' }" scroll-y="true"
					@scrolltolower="onreachBottom">
					<view class="px-28 pb-40 bg-FFFFFF" style="padding-top: 30rpx;" v-for="(item,index) in dataList"
						:key="index" @click.native="details(item)">
						<!-- <x-did-title name="普医堂中医(综合)诊所"> -->
						<x-did-title :name="item.store_info.store_name">
							<view class=" fs-26 fw-400 c-77">
								{{item.status_name}}
							</view>
						</x-did-title>

						<x-StayToThe v-for="(item2,index2) in item.goods_info" :key="index2" :img="item2.goods_image"
							:title="item2.goods_title" :price="item2.goods_price" :num="item2.goods_num" />
						<view class="just-between">
							<view class="fw-400 c-77 f-26">
								<!-- 2022-01-10 18:45 -->
								{{item.updatetime}}
							</view>
							<view class="flex aj-center">
								<text>合计</text>
								<text class="c-11 f-bold f-36">￥{{item.total_amount}}</text>
							</view>
						</view>
					</view>
					<view class="aj-center" v-if="dataList.length==0">
						暂无更多
					</view>
					<view class="aj-center">
						<u-loading mode="circle" style="padding-top: 10rpx;padding-bottom: 10rpx;" v-show="load">wefwe
						</u-loading>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item class="swiper-item">
				<scroll-view lower-threshold="20" :style="{ height: windowHeight-40 + 'px' }" scroll-y="true"
					@scrolltolower="onreachBottom">
					<view class="px-28 pb-40 bg-FFFFFF" style="padding-top: 30rpx;" v-for="(item,index) in dataList"
						:key="index" @click.native="details(item)">
						<!-- <x-did-title name="普医堂中医(综合)诊所"> -->
						<x-did-title :name="item.store_info.store_name">
							<view class=" fs-26 fw-400 c-77">
								{{item.status_name}}
							</view>
						</x-did-title>

						<x-StayToThe v-for="(item2,index2) in item.goods_info" :key="index2" :img="item2.goods_image"
							:title="item2.goods_title" :price="item2.goods_price" :num="item2.goods_num" />
						<view class="just-between">
							<view class="fw-400 c-77 f-26">
								<!-- 2022-01-10 18:45 -->
								{{item.updatetime}}
							</view>
							<view class="flex aj-center">
								<text>合计</text>
								<text class="c-11 f-bold f-36">￥{{item.total_amount}}</text>
							</view>
						</view>
					</view>
					<view class="aj-center" v-if="dataList.length==0">
						暂无更多
					</view>
					<view class="aj-center">
						<u-loading mode="circle" style="padding-top: 10rpx;padding-bottom: 10rpx;" v-show="load">wefwe
						</u-loading>
					</view>
				</scroll-view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: 674,
				page: 1,
				size: 10,
				status: 1, //1待自提 2已完成 3已取消
				total: '', //返回的参数数量
				dataList: [], //所有的参数
				list: [{
					name: '待自提'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}],
				tabs: ['10', '20', '30'],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				load: false,
			}
		},
		filters: {
			getYMDHMS(timestamp) {
				var numtimestamp = Number(timestamp);
				let time = new Date(numtimestamp)
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let date = time.getDate()
				let hours = time.getHours()
				let minute = time.getMinutes()
				let second = time.getSeconds()

				if (month < 10) {
					month = '0' + month
				}
				if (date < 10) {
					date = '0' + date
				}
				if (hours < 10) {
					hours = '0' + hours
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
				return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
			}

		},
		onShow() {
			const info = uni.getSystemInfoSync();
			console.log(info);
			this.windowHeight = info.windowHeight;
		},
		onLoad() {
			this.selfetchList()
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				this.current = index;
				this.load = false;

			},

			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.swiperCurrent = current;
				this.current = current;
				this.load = false;
				switch (current) {
					case 0:
						this.status = 1;
						this.dataList = [];
						this.page = 1;
						this.size = 10;
						this.selfetchList();
						break;
					case 1:
						this.status = 2;
						this.dataList = [];
						this.page = 1;
						this.size = 10;
						this.selfetchList();
						break;
					case 2:
						this.status = 3;
						this.dataList = [];
						this.page = 1;
						this.size = 10;
						this.selfetchList();
						break;
					default:
						break;
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.total != this.dataList.length) {
					this.page++;
					this.load = true;
					this.$https('doctindex.selfetchList', {
						page: this.page,
						size: this.size,
						status: this.status
					}).then(res => {
						this.load = false;
						let erarry = res.data.list;
						// let flatarr = erarry.flat();
						// this.dataList.push(...flatarr); 
						this.dataList.push(...erarry);
						this.total = res.data.total;
						console.log(res, 'res')
					})
				} else {
					console.log('无法加载暂无那么多数据')
				}
				console.log('触发加载')
			},
			details(item) {
				// let itemslist=JSON.stringify(item);
				// uni.setStorageSync('detailitem', itemslist);
				uni.navigateTo({
					url: `/goodsPage/shoopDetails/shoopDetails?id=${item.order_id}`
				})
			},
			// 获取数据
			selfetchList() {
				this.$https('doctindex.selfetchList', {
					status: this.status,
					page: this.page,
					size: this.size
				}).then(res => {
					let erarry = res.data.list;
					// let flatarr = erarry.flat();
					// this.dataList.push(...flatarr); 
					this.dataList.push(...erarry);
					this.total = res.data.total;
					console.log(res, 'res')
				})
			}
		}
	}
</script>

<style scoped>
	@import url("@/common/css/fress.css");
	@import url("@/common/css/mycss.css");

	.h {
		/* height: calc(); */
	}
</style>
